<template>
  <div>
    <el-button type="primary" @click="$refs.flow.addNode('测试节点')"
      >添加节点</el-button
    >
    <el-button type="primary" @click="handleNext">下一个节点</el-button>
    <br /><br />
    <avue-flow
      :height="600"
      :width="1200"
      ref="flow"
      :option="option"
      v-model="form"
    >
      <template slot-scope="scope" slot="header">
        <i
          class="el-icon-delete"
          @click="$refs.flow.deleteNode(scope.node.id)"
        ></i>
        自定义头部
      </template>
      <div slot-scope="{ node }">
        <span>自定义{{ (node || {}).name }}</span>
      </div>
    </avue-flow>
  </div>
</template>
<script>
import jsPlumb from 'jsplumb';
export default {
  data() {
    return {
      count: 0,
      form: "",
      option: {
        name: "流程A",
        nodeList: [
          {
            id: "nodeA",
            name: "流程A-节点A",
            left: 39,
            top: 110,
          },
          {
            id: "nodeB",
            name: "流程A-节点B",
            left: 340,
            top: 161,
          },
          {
            id: "nodeC",
            name: "流程A-节点C",
            left: 739,
            top: 161,
          },
          {
            id: "nodeD",
            name: "节点D",
            left: 739,
            top: 20,
          },
        ],
        lineList: [
          {
            from: "nodeA",
            to: "nodeB",
          },
          {
            from: "nodeB",
            to: "nodeC",
          },
          {
            from: "nodeC",
            to: "nodeD",
          },
        ],
      },
    };
  },
  computed: {
    nodeList() {
      return this.option.nodeList;
    },
  },
  
  mounted() {
    this.form = this.nodeList[this.count].id;
    jsPlumb.ready(function() {
      // Your jsPlumb setup code here
    });
  },
  methods: {
    handleClick(node) {
      this.$message.success(JSON.stringify(node));
    },
    handleNext() {
      this.count++;
      if (this.count >= this.nodeList.length) {
        this.count = 0;
      }
      this.form = this.nodeList[this.count].id;
    },
  },
};
</script>
<style scoped>
>>>.avue-flow__node--active{
  border-width: 3px;
}
</style>